<template>
	<uni-nav-bar title="配送费膨胀详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package" v-if="orderLists">
		<view class="space-between">
			<view>订单号</view>
			<view>{{orderLists.order_sn}}</view>
		</view>
		<view class="space-between top">
			<view>车友</view>
			<view>{{orderLists.driver_name}} </view>
		</view>
		<view class="space-between top">
			<view>加注量</view>
			<view>{{orderLists.amount}} </view>
		</view>
		<view class="space-between top">
			<view>加注机</view>
			<view>{{orderLists.fill_name}}</view>
		</view>
		<view class="space-between top">
			<view>加注时间</view>
			<view>{{orderLists.createtime}} </view>
		</view>
		<view class="space-between top">
			<view>加注地址</view>
			<view style="width:70%;text-align: right;">{{orderLists.address}} </view>
		</view>
	</view>
	<view class="package" v-if="orderLists">
		<view class="space-between">
			<view>车友绑定照片</view>
			<image :src="orderLists.user_image" mode="" @click="onPreviewImage(orderLists.user_image)"></image>
		</view>
	</view>
	<view class="package" v-if="orderLists&&orderLists.check_des">{{orderLists.check_des}}<text style="color:#558AF1;"
			@click="navTo('administrator/delivery/abnormal?id='+orderID)">异常处理 >></text></view>
	<view class="package" v-if="orderLists">
		<view class="space-between">
			<view>{{orderLists.check_cart_code}}</view>
			<view class="center">
				<image :src="orderLists.staff_image" mode="" @click="onPreviewImage(orderLists.staff_image)"></image>
				<image :src="orderLists.cart_image" mode="" @click="onPreviewImage(orderLists.cart_image)"></image>
			</view>
		</view>
		<view class="space-between top" v-for="(item,index) in orderLists.list" :key="index">
			<view>{{item.staff_name}}膨胀收益</view>
			<view>{{item.multiple_fee}}</view>
		</view>
	</view>
	<view class="package" v-if="orderLists&&orderLists.fuhe_status!=0">
		<view class="space-between">
			<view>复核人</view>
			<view>张欣</view>
		</view>
		<view class="space-between top">
			<view>复核状态</view>
			<view>{{orderLists.fuhe_status_name}}</view>
		</view>
		<view class="space-between top" v-if="orderLists.fuhe_des">
			<view>备注</view>
			<view style="width:70%;text-align: right;">{{orderLists.fuhe_des}}</view>
		</view>
	</view>

	<view class="center but" style="justify-content:space-around;">
		<view class="but" @click="navTo('administrator/delivery/abnormal?id='+orderID)">异常处理</view>
		<view class="but" @click="checkBut" v-if="orderLists&&orderLists.fuhe_status==0">复核</view>
	</view>
	<!-- 复核弹框 -->
	<CheckPop ref="checkPop" :orderID="orderID" @submit="init"></CheckPop>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import CheckPop from '@c/administrator/BulletBox/checkPop.vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { getStaffDriverOrderInfo } from '@/gql/auditor';
	import { showLoading } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	const checkPop = ref(null)
	const orderID = ref()
	const orderLists = ref()
	const imgList = ref([])
	onLoad((pearm) => {
		orderID.value = Number(pearm.id)
	})
	onShow(() => {
		init()
	})
	function init() {
		showLoading()
		const payload = {
			query: getStaffDriverOrderInfo,
			variables: {
				id: orderID.value
			},
		};
		toPublish(
			'ql/control/getStaffDriverOrderInfo',
			payload,
			(obj : any) => {
				const { getStaffDriverOrderInfo } = obj.data;
				orderLists.value = getStaffDriverOrderInfo
			}
		);
	}
	function checkBut() {
		checkPop.value.open()
	}
	function onPreviewImage(num : string) {
		imgList.value = []
		imgList.value.push(num)
		uni.previewImage({
			current: 0,
			urls: imgList.value
		});
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 20rpx;
	}

	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 5px;
		margin-left: 20rpx;
	}

	.but {
		margin: 80rpx auto 30rpx;

		view {
			width: 40%;
			height: 98rpx;
			text-align: center;
			line-height: 98rpx;
			border-radius: 5px;
		}

		view:nth-of-type(1) {
			border: 1px solid #558AF1;
			color: #558AF1;
			box-sizing: border-box;
		}

		view:nth-of-type(2) {
			background: #558AF1;
			color: #fff;
		}



	}
</style>